<template>
  <div class="field-config-page" v-loading="pageLoading">
    <div class="field-config-container">
      <a-row>
        <a-form-model ref="ruleForm" :model="ruleForm">
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="6">
            <a-form-model-item ref="proName" label="设备名称" prop="proName">
              <a-input placeholder="请输入" disabled v-model="equName" />
            </a-form-model-item> </a-col></a-form-model
      ></a-row>
      <a-row>
        <a-form-model ref="ruleForm" :model="ruleForm">
          <span v-for="(item, index) in filedList" :key="item.id">
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="6">
              <a-form-model-item
                ref="proName"
                :label="item.equField"
                :prop="item.equField"
                :rules="[
                  {
                    required: true,
                    message: '请输入' + item.equField,
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <a-input
                  placeholder="请输入"
                  v-model="ruleForm[item.equField]"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :xs="24"
              :sm="24"
              :md="24"
              :lg="24"
              :xl="12"
              :xxl="6"
              :class="largeScreen && 'largeScreen'"
            >
              <a-form-model-item
                ref="proName"
                label="是否显示在查询页面"
                :prop="'.equFieldIsDisplay_' + index"
                :rules="[
                  {
                    required: true,
                    message: '请选择',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <a-radio-group v-model="ruleForm['equFieldIsDisplay_' + index]">
                  <a-radio :value="1"> 是 </a-radio>
                  <a-radio :value="0"> 否 </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </span>
        </a-form-model>
      </a-row>
    </div>

    <!-- 提交按钮 -->
    <div class="footer">
      <a-button @click="back()"> 取消 </a-button>
      <a-button
        type="primary"
        style="margin-left: 10px"
        v-loading="submitLoading"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import { debounce } from "@/utils";
import {
  getSpecialFileds,
  editorSpecialFileds,
} from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      largeScreen: true,
      ruleForm: {},
      filedList: [],
      pageLoading: true,
      submitLoading: false,
      equName: "",
    };
  },
  watch: {
    $route: {
      handler(val) {
        let { equName = "" } = this.$route.query;
        this.equName = equName;
      },
      immediate: true,
    },
  },
  mounted() {
    this.getSpecialFileds();
    window.addEventListener(
      "resize",
      debounce(() => {
        let cW = document.body.clientWidth;
        this.largeScreen = cW >= 1200;
      }, 0)
    );
  },
  methods: {
    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { ruleForm } = this;
          Object.keys(ruleForm).map((key) => {
            try {
              let { v, i } = this.getOrignData(key);
              this.$set(this.filedList[i], "equFieldName", ruleForm[key]);
            } catch (error) {
              if (key.includes("equFieldIsDisplay_")) {
                let index = key.split("equFieldIsDisplay_")?.[1];
                if (index) {
                  this.$set(
                    this.filedList[index],
                    "equFieldIsDisplay",
                    ruleForm[key]
                  );
                }
              }
            }
          });
          //执行编辑接口
          this.submitLoading = true;
          let { systemCode = "" } = this.$route?.query || {};
          editorSpecialFileds({ systemCode, data: this.filedList })
            .then((res) => {
              let { data } = res;
              if (data?.result) {
                this.$message.success("操作成功");
              } else {
                this.$message.error("操作失败，请稍后重试！");
              }
            })
            .catch((_) => {
              this.$message.error("操作失败，请稍后重试！");
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          this.$message.error(`数据填写不完整`);
          return false;
        }
      });
    },
    back() {
      //返回列表页
      this.$router.push({
        path: `/nebula/user-app/equipmentManage`,
      });
    },

    //查询过滤元数据
    getOrignData(key = "") {
      let { filedList } = this;
      if (!key) return;
      try {
        filedList.forEach((v, i) => {
          if (v.equField == key) {
            throw {
              v,
              i,
            };
          }
        });
      } catch (data) {
        return data;
      }
    },

    //查询字段列表
    getSpecialFileds() {
      let {
        tenantCode = "",
        systemCode = "",
        equNum = "",
      } = this.$route?.query || {};
      this.pageLoading = true;
      getSpecialFileds({
        tenantCode,
        systemCode,
        equCode: equNum,
      })
        .then((res) => {
          let { data } = res;
          this.filedList = data?.result || [];
          this.filedList.forEach((v, i) => {
            this.$set(this.ruleForm, v.equField, v.equFieldName);
            this.$set(
              this.ruleForm,
              "equFieldIsDisplay_" + i,
              v.equFieldIsDisplay
            );
          });
        })
        .catch((_) => {
          this.filedList = [];
        })
        .finally((_) => {
          this.pageLoading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.field-config-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0 20px 0;
  .flex();
  flex-direction: column;
  overflow: hidden;
  .field-config-container {
    flex: 1;
    .custom-scrollbar();
  }
  /deep/.ant-form {
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 180px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    .ant-col {
      &.largeScreen {
        .ant-form-item-label {
          width: 200px;
        }
      }
    }
    /deep/.ant-select {
      width: 100%;
    }
  }
  .footer {
    height: 72px;
    border-top: 1px solid #f3f4f6;
    margin-top: 34px;
    .flex();
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
}
</style>
